<template>
  <div class="row-main">
    <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;flex-direction: row">
      <el-card class="box-card"  style="width: 600px;" >
        <div slot="header" class="clearfix" style="text-align: center;display: inline-block">
          <span>备案信息配置中心</span>
        </div>
        <el-form :model="form" ref="form" label-width="200px" >
          <el-form-item label="网站名称:" prop="website" :rules="[{ required: true, message: '请输入网站名称', trigger: 'blur'}]">
            <el-input v-model="form.website" />
          </el-form-item>
          <el-form-item label="选择备案省份:" prop="province" :rules="[{ required: true, message: '请输入ICP备案号', trigger: 'change'}]">
            <el-select placeholder="选择运营商" style="width: 300px;" v-model="form.province">
              <el-option v-for="item in provinceOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ICP备案号:" prop="icpNo" :rules="[{ required: true, message: '请输入ICP备案号', trigger: 'blur'}]">
            <el-input v-model="form.icpNo" ><template slot="prepend">ICP备</template></el-input>
          </el-form-item>
          <el-form-item label="公网安备号:" prop="policeNo" :rules="[{ required: true, message: '请输入公网备案号', trigger: 'blur'}]">
            <el-input v-model="form.policeNo" ><template slot="prepend">公网安备</template></el-input>
          </el-form-item>
          <el-form-item label="公网安备recordCode：" prop="recordCode" :rules="[{ required: true, message: '请输入公网备案recordCode', trigger: 'blur'}]">
            <el-input v-model="form.recordCode" />
          </el-form-item>
        </el-form>
        <div style="color: #888;padding: 0 40px;font-size: 12px;margin-bottom: 20px">
          示例：百度公网安备跳转链接"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001",公网安备recordCode为"11000002000001"
        </div>
        <div style="width: 100%;display: flex;justify-content: center;align-items: center">
          <el-button type="primary" v-preventReClick @click="onsubmit('form')">提 交</el-button>
          <el-button type="shenda" @click="resetForm('form')">重 置</el-button>
        </div>
      </el-card>
      <el-card class="box-card"  style="width: 800px;display: inline-block;margin-left: 20px">
        <div slot="header" class="clearfix">
          <span>信息预览</span>
        </div>
        <div class="infoBlock">
          <div class="infoBlockLeft">网站名称：</div>
          <div class="infoBlockRight">
            <span v-if="form.website">{{form.website}}</span>
            <span v-if="!form.website" style="color: brown">未输入有效信息</span>
          </div>
        </div>
        <div class="infoBlock">
          <div class="infoBlockLeft">ICP备案信息：</div>
          <div class="infoBlockRight">
            <span v-if="form.province&&form.icpNo">{{form.province}}ICP备{{form.icpNo}}</span>
            <span v-if="!form.province||!form.icpNo" style="color: brown">未输入有效信息</span>
          </div>
        </div>
        <div class="infoBlock">
          <div class="infoBlockLeft">公网备案信息：</div>
          <div class="infoBlockRight1" @click="goToAddr" v-if="form.province&&form.policeNo"><img :src="policeImg" style="width:20px;height:auto;margin-right: 5px" /> {{form.province}}公网安备{{form.policeNo}}</div>
          <div class="infoBlockRight" v-if="!form.province||!form.policeNo||!form.recordCode" style="color: brown"><span>未输入有效信息</span></div>
        </div>
        <div class="infoBlock" style="color: brown;font-size: 12px;padding-left: 120px">* 请您填入真实有效信息，本系统将不定期检查您录入的信息是否真实有效</div>
      </el-card>
    </div>

    <div>

    </div>
  </div>
</template>

<script>
import { saveIcpInfo, getIcpInfo } from '@/api/getData'
export default {
  name: "",
  data() {
    return {
      form: {
        website: '',    //网站名称
        province: '',   //省份简写名称
        icpNo: '',      //icp备案号
        policeNo:'',    //公网备案号
        recordCode:'',  //跳转参数
      },
      policeImg: require('../../assets/images/police.png'),
      provinceOptions: [
        { value: '', label: '请选择'},
        { value: 1, label: '京'},
        { value: 2, label: '津'},
        { value: 3, label: '冀'},
        { value: 4, label: '晋'},
        { value: 5, label: '蒙'},
        { value: 6, label: '辽'},
        { value: 7, label: '吉'},
        { value: 8, label: '黑'},
        { value: 9, label: '沪'},
        { value: 10, label: '苏'},
        { value: 11, label: '浙'},
        { value: 12, label: '皖'},
        { value: 13, label: '闽'},
        { value: 14, label: '赣'},
        { value: 15, label: '鲁'},
        { value: 16, label: '豫'},
        { value: 17, label: '鄂'},
        { value: 18, label: '湘'},
        { value: 19, label: '粤'},
        { value: 20, label: '桂'},
        { value: 21, label: '琼'},
        { value: 22, label: '蜀'},
        { value: 23, label: '黔'},
        { value: 24, label: '滇'},
        { value: 25, label: '渝'},
        { value: 26, label: '藏'},
        { value: 27, label: '陕'},
        { value: 28, label: '甘'},
        { value: 29, label: '青'},
        { value: 30, label: '宁'},
        { value: 31, label: '新'},
        { value: 32, label: '港'},
        { value: 33, label: '澳'},
        { value: 34, label: '台'},
      ],
      pagekey: '',
    }
  },
  async mounted() {
    this.pagekey = await this.$getPageKey();
    this.initData();
  },
  methods: {
    async initData(){
      let returnData = await getIcpInfo({});
      if(returnData._result){
        this.form.website = returnData.data.website?returnData.data.website:'';
        let icpNo = returnData.data.icpNo?returnData.data.icpNo:'';
        this.form.icpNo = icpNo?icpNo.substring(5,icpNo.length):'';
        let policeNo = returnData.data.policeNo?returnData.data.policeNo:'';
        this.form.policeNo = policeNo?policeNo.substring(5,policeNo.length):'';
        this.form.province = icpNo?icpNo.substring(0,1):'';
        this.form.recordCode = returnData.data.recordCode?returnData.data.recordCode:'';
      }
    },
    async onsubmit(){
      let icpNo = this.form.icpNo?this.form.province + 'ICP备' + this.form.icpNo:'';
      let policeNo = this.form.policeNo?this.form.province + '公网安备' + this.form.policeNo:'';
      let returnData = await saveIcpInfo({
        website: this.form.website,
        icpNo,
        policeNo,
        recordCode: this.form.recordCode,
        pagekey: this.pagekey,
      })
      if(returnData.code==10000){
        this.$message({
          type: 'success',
          message: '信息提交成功！'
        })
      }
      this.pagekey = await this.$getPageKey();
      this.initData()
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
    goToAddr(){
      let url = 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+this.form.recordCode
      window.open(url, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
  .infoBlock{
    width: 100%;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .infoBlockLeft{
    width: 220px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a1a;
    display: inline-flex;
    justify-content: flex-end;
  }
  .infoBlockRight{
    width: 330px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    text-align: left;
    padding-left: 20px;
  }
  .infoBlockRight1{
    width: 330px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    text-align: left;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    padding-left: 20px;
  }
  .infoBlockRight1:hover{
    color: var(--lightBg) !important;
  }
</style>
